<template>
	<view class='container' >
		<view class="wrapper">
			<view class='mui-content input-content'>
				<view class='input-item'>
					<text class="tit">姓名</text>
					<input class='minput' type='text' v-model="name" placeholder='联系人姓名'></input>
				</view>
				<view class='input-item'>
					<text class="tit">手机</text>
					<input class='minput' type='number' v-model="tel" placeholder='请输入联系方式'></input>
				</view>
				<view id='showCityPicker3' class='input-item'  >
					<text class="tit">地址</text>
					<input class='minput' @click="show=true" :value="addr_text" placeholder="请选择所属区域" disabled="ture"></input>
					
					<w-picker
						:visible.sync="show"
						mode="region"
						:value="addr_code"
						default-type="value"
						:hide-area="false"
						@confirm="onConfirm($event)"
						@cancel="onCancel"
						ref="region"
					></w-picker>
					<text class="iconfont icon-fanhui1"></text>
				</view>
				<view class='input-item'>
					<textarea class="xiangxi" v-model="detail" placeholder="请输入详细地址" placeholder-style="color:#999;"/>
					</view>
				<view class="moren">
						<view class="uni-list">
							<view class="uni-list-cell uni-list-cell-pd">
								<view class="uni-list-cell-db">设为默认地址</view>
								<u-switch v-model="is_default" class="kaiguan" @change="change"></u-switch>
							</view>
					</view>
			</view>
		</view>
	<button class="confirm-btn" @click="saveAddsress">确认</button>
	</view>
 </view>
</template>

<script>
	import {saveAddress,get_addr_detail} from '@/api/index.js'
	export default{
		data(){
			return{
				show:false,
				name:'',
				tel:'',
				addr_text:'',
				addr_code:[],
				detail:'',
				is_default:false,
				addr_id:'',
			}
		},
		onLoad(option) {
			// this.saveAddsress()
			// console.log()
			let uid = uni.getStorageSync('uid')
			this.addr_id=option.card_id
			if(this.addr_id){
				get_addr_detail({_id:this.addr_id,uid}).then(res=>{
					// console.log(res)
					this.name=res.data[0].name
					this.tel=res.data[0].tel
					this.detail=res.data[0].detail
					this.name=res.data[0].name
					this.is_default=res.data[0].is_default
					this.addr_text=res.data[0].addr_text
				})
			}
			// console.log(this.addr_id)
		},
		methods:{
			onConfirm(e){
							// console.log(e) 
							this.addr_text = e.result;
							this.addr_code = e.value;
							// console.log(this.addr_code)
			},
			onCancel(){
							this.show = false 
			},
			change(e){
				this.is_default=e
				// console.log(this.is_default);
			},
			saveAddsress(){
				let {name,tel,addr_text,addr_code,detail,is_default,addr_id} =this
				let uid = uni.getStorageSync('uid')
				if(!uid){
					this.$u.toast('您还没登陆')
					return
				}
				if(!name){
						this.$u.toast('请填写收货人名字');
						return
					}			  
					if(!tel){
						this.$u.toast('请填写收货人手机号码');
						return
					}		
				if(!/^1[3-9]\d{9}$/.test(tel)){
						this.$u.toast('收货人手机号码格式错误');
						return
					}	
					
					if(!addr_text){
						this.$u.toast('请选择所在区域');
						return
					}				
					if(!detail){
						this.$u.toast('请填写详细地址');
						return
					}
				// let {name,tel,addr_text,addr_code,detail,is_default,addr_id} =this
				saveAddress({name,tel,addr_text,addr_code,detail,is_default,addr_id,uid}).then(res=>{
					// console.log(res)
					if(res.code==1){
						// this.$u.toast('添加成功')
						uni.navigateBack({
							delta: 1
						});
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	.uni-input-placeholder {
		color: #999
	}
	.container {
		position: relative;
		width: 100vw;
		height: 90vh;
		overflow: hidden;
		background: #f7f7f7;
	}
	.input-content {
		background: #fff;
	}
	
	
	.input-item {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: auto;
		padding: 16upx 30upx;
		background: #fff;
		border-bottom: 1px solid #f5f5f7;
		&:last-child {
			margin-bottom: 0;
		}
		.pieckerInput{
			color: #333;
			width: calc(100% - 230upx);
			font-size: 30upx;
			display: inline-block;
			line-height: 60upx;
		}

		.xiangxi{
			width: 100%;
			height: 162upx;
			padding: 14upx 10upx;
			font-size: 30upx;
		}
		.tit {
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			color: $font-color-dark;
			width: 200upx
		}
		.iconfont {
			color: #999;
			line-height: 60upx;
			position: absolute;
			right: 30upx;
		}
		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			flex: 1;
			width: calc(100% - 50upx);
			text-align: right;
		}
	
		.clear_input {
			position: absolute;
			right: 0;
			top: 10upx;
			padding: 10upx;
	
			.iconfont {
				font-size: 40upx;
				color: $font-color-light
			}
		}
	}
	
	.confirm-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		border-radius: 4px;
		background: $color1;
		color: #fff;
		font-size: $font-lg;
		&:after {
			border-radius: 100px;
			border: none;
		}
	}
	.moren{
		border-top: 20upx solid #f7f7f7;
		padding: 0 30upx; 
		height: 110upx;
		line-height: 90upx;
		overflow: hidden;
		font-size: 30upx;
			.uni-list-cell-db{ 
				float: left;
				color: #333;
				}
		.kaiguan{
				float: right;
				// line-height: 27px;
				margin-top: 10px;
		} 
	}
	.allinfo {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.xzdz .box01 {
		width: 94%;
		height: 45px;
		border-bottom: 1px solid #f7f7f7;
		margin-left: 3%;
	}

	.xzdz .box01 input {
		width: 72%;
		height: 45px;
		float: right;
	}

	.xzdz .box01 text {
		width: 70px;
		line-height: 45px;

	}


	.xzdz .box01.mr .iconfont {
		line-height: 42px;
		font-size: 18px;
		vertical-align: middle;
	}

	.xzdz .box01.gouxuan .iconfont:before {
		color: #4499ee;
		content: "\e61e";
	}

	.allinfo .btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background: #4499ee;
		border-radius: 0;
		position: fixed;
		bottom: 0;
		color: #fff;
		font-size: 16px;
	}

	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}
uni-switch .wx-switch-input:not([class*="bg-"]), uni-switch .uni-switch-input:not([class*="bg-"]){
	
}
</style>
